<script setup>
// 组件引入
import HeaderCpn from '@/components/main/header/headerCpn.vue'
import TableCpn from '@/components/main/building/system-manger/tables-cpn.vue'
import AddBuildingCpn from '@/components/main/building/system-manger/add-panel.vue'

// 功能函数引入
import { useBuildingStore } from '@/store/super-manger/buildingStore'
import { onMounted, ref } from 'vue';
import eventBus from '@/utils/eventBus'
import { storeToRefs } from 'pinia';

const buildingStore = useBuildingStore();
const { isShowBuildingPanel, panelTitle, openPanelType } = storeToRefs(buildingStore);
onMounted(() => {
  buildingStore.getBuildingData();  // 发送网络请求数据
})

// 搜索options
const elOptions = ref([
  {
    title: '楼栋ID',
    value: 'building_id',
    text: '请输入楼栋ID'
  },
  {
    title: '楼栋编号',
    value: 'building_name',
    text: '请输入楼栋编号'
  }
]);

// 监听楼栋添加
eventBus.on('addBtnClick', function() {
    isShowBuildingPanel.value = true;
    panelTitle.value = '新增';
    openPanelType.value = 'add';
})

// 监听搜索按钮的点击
eventBus.on('searchBtnClick', function(value) {
  // 发送网络请求
  buildingStore.searchBuilding(value);
})

// 监听搜索框是否被清空了
eventBus.on('clearSearchBox', function() {
  // 重新发送网络请求数据
  buildingStore.getBuildingData();  // 发送网络请求数据
})
</script>

<template>
  <div class="building main_content">
    <!-- 头部组件 -->
    <header-cpn :elOptions="elOptions"/>
    <!-- 表格展示 -->
    <table-cpn />
    <!-- 添加面板 -->
    <add-building-cpn />
  </div>  
</template>

<style scoped lang="less">
</style>